<script setup lang="ts">
import Button from './components/Button/ButtonMain.vue'
import {ref,onMounted,h} from 'vue'
import Dropdown from './components/Dropdown/DropdownTwo'
import type {MenuOptions} from './components/Dropdown/types'
// 文件导入写错了
import Collapse from './components/Collapse/CollapseMain.vue'
import Item from './components/Collapse/CollapseItem.vue'
import type {ButtonInstance} from './components/Button/types'
import type {TooltipInstance} from'./components/Tooltip/types'
// import Message from './components/Message/MessageMain.vue'
import {createMessage} from './components/Message/method'

const tooltipRef = ref<TooltipInstance|null>(null)
const buttonRef=ref<ButtonInstance|null>(null)
const openedValue= ref(['a'])

type TriggerType = 'hover' | 'click';
const trigger = ref<TriggerType>('click');
const options:MenuOptions[]=[
  // h用来创建虚拟节点h（标签名，属性，dom节点（可以是文本字符串或别的vnode））
  {key:1,label:h('b','this is bold')},
  {key:2,label:'item2',disabled:true},
  {key:3,label:'item3',divided:true},
  {key:4,label:'item4'}

]
const open =()=>{
  tooltipRef.value?.show()
}
const close =()=>{
  tooltipRef.value?.hide()
}

// buttonRef.value.ref 就是子组件通过 defineExpose 暴露出来的 _ref，可以拿到dom节点
onMounted(()=>{
  createMessage({message:'hello world',duration:3000,showClose:true,type:'success'})
  createMessage({message:'hello world again',duration:0,showClose:true,type:'danger'})
  createMessage({message:'hello world three',duration:0,showClose:true,type:'warning'})
  if(buttonRef.value){
    console.log('buttonRef',buttonRef.value.ref)
  }

})
</script>



<template>
  <header>
    
    <Dropdown  placement="right" :trigger="trigger" :menu-options="options" >
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" >
    </Dropdown>
  </header>

  <main>
    <Button ref="buttonRef" @click="open">Test Button</Button>
    <Button plain @click="close">plain Button</Button>
    <Button round>Round Button</Button>
    <Button circle>VK</Button>
    <Button disabled>Disabled Button</Button><br/><br/>
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="info"> Info</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger" >Danger</Button><br/><br/>
    <Button type="primary" plain>Primary</Button>
    <Button type="success" plain>Success</Button>
    <Button type="info" plain>Info</Button>
    <Button type= "warning" plain> Warning</Button>
    <Button type="danger" plain>Danger</Button><br/><br/>
    <Button size="large" >Large</Button>
    <Button size="small" >Small</Button><br/><br/>
    <Button size="large" loading>Loading</Button>
    <Button size="large" icon="arrow-up">Icon</Button>

    <Collapse v-model="openedValue" accordion>
     <Item name="a">
       <template #title>
         <span>标题一</span>
       </template>
       <div>headline title</div>
       <div> this is content a aaa </div>
     </Item>
     <Item name="b">
      <template #title>
         <span>标题二</span>
       </template>
       <div>this is bbbbb test </div>
     </Item>
     <Item name="c" >
       <template #title>
         <span>标题三</span>
       </template>
       <div>this is cccc test </div>
     </Item>
    </Collapse>
  </main>
</template>






<style scoped>

</style>